<template>
  <div class="aside" >

    <el-menu   router   :default-active="$route.path" class="el-menu-vertical-demo" background-color="#545c64" text-color="#fff" active-text-color="#ffd04b" @open="handleOpen" @close="handleClose" :collapse="isCollapse">
      <div index="5" class="logo " >
        <span v-if="isCollapse" class="min">小优</span>
        <span v-else class="max">小优商城后台</span>
      </div>

          <!-- <template slot="title">分组一</template> -->

      <el-menu-item index="/banner">
        <i class="el-icon-menu"></i>
        <span slot="title">管理中心</span>
      </el-menu-item>
      <el-submenu index="2">
        <template slot="title">
          <i class="el-icon-setting"></i>
          <span>系统设置</span>
        </template>
        <el-menu-item-group>
          <!-- <template slot="title">分组一</template> -->


          <!--                              <router-link to="/vcenter/1" >     <el-menu-item index="2-1">菜单管理</el-menu-item></router-link>-->
          <!--                            &lt;!&ndash; <router-link :to = "{name:'vcenter'}" >管理中心</router-link> &ndash;&gt;-->
          <!--                            <router-link :to = "{name:'vgoods'}"> <el-menu-item index="2-2">角色管理</el-menu-item></router-link>-->
          <!--                            <router-link :to = "{name:'vmembers'}"> <el-menu-item index="2-3">管理员管理</el-menu-item></router-link>-->
          <!--                            <router-link :to = "{name:'vlist'}"><el-menu-item index="2-4">会员管理</el-menu-item></router-link> -->
          <!--                     -->
          <!--                          <el-menu-item index="/home">首页</el-menu-item>-->
          <!--                            <el-menu-item index="/vcenter">管理中心</el-menu-item>-->
          <!--                          &lt;!&ndash; <router-link :to = "{name:'vcenter'}" >管理中心</router-link> &ndash;&gt;-->
          <!--                          <el-menu-item index="/vgoods">商品管理</el-menu-item>-->
          <!--                          <el-menu-item index="/vlist">订单管理</el-menu-item>-->
          <!--                          <el-menu-item index="/vmembers">会员管理</el-menu-item>-->


          <el-menu-item index="/menu">菜单管理</el-menu-item>
          <el-menu-item index="/role">角色管理</el-menu-item>
          <!-- <router-link :to = "{name:'vcenter'}" >管理中心</router-link> -->
          <el-menu-item index="/admin">管理员管理</el-menu-item>


        </el-menu-item-group>

      </el-submenu>
      <el-submenu index="3">
        <template slot="title">
          <i class="el-icon-user"></i>
          <span>商城管理</span>
        </template>
        <el-menu-item-group>
          
          <el-menu-item index="/category">商品类型管理</el-menu-item>
          <el-menu-item index="/specs">商品规格管理</el-menu-item>
          <!-- <router-link :to = "{name:'vcenter'}" >管理中心</router-link> -->
          <el-menu-item index="/good">商品数据管理</el-menu-item>

        </el-menu-item-group>

      </el-submenu>
      <el-submenu index="4">
        <template slot="title">
          <i class="el-icon-s-order"></i>
          <span>商城管理</span>
        </template>
        <el-menu-item-group>
          <!-- <template slot="title">分组一</template> -->
          <el-menu-item index="4-1">订单管理</el-menu-item>
          <el-menu-item index="4-2">选项2</el-menu-item>
        </el-menu-item-group>

      </el-submenu>
    </el-menu>

  </div>
</template>

<script>
import {mapGetters} from 'vuex'
import vm from "../utils/vm"
export default {
  created(){
    vm.$on("myevent",(data)=>{
      this.isCollapse=data



    })
  },
  data() {
    return {
      isCollapse: false
    };
  },
  methods: {
    handleOpen(key, keyPath) {
      console.log(key, keyPath);
    },
    handleClose(key, keyPath) {
      console.log(key, keyPath);
    },


  }

}
</script>
<style scoped>
.max{
  font-size: 20px;
}
.min{
  font-size: 30px;
  color:gold;
}
.aside {

  max-width: 200px;
  /*font-size: 18px;*/
  letter-spacing: 2px;
  height: 60px;
  background-color: #606266;
  color: white;
  text-align: center;
  line-height: 60px;
}
.logo{

  background-color: #959699 !important;
}
.el-menu {
  height: 100vh;
  border: none;
  width: 100%;

}
.el-menu-vertical-demo:not(.el-menu--collapse) {
  min-width: 200px;
  min-height: 400px;
}
.el-menu-item{
  padding:0px!important;
}


</style>